<template>
  <el-transfer
    style="text-align: left; display: inline-block"
    v-model="value"
    :titles="['显示', '隐藏']"
    @change="handleChange"
    :data="data"
  >
  </el-transfer>
</template>
<script>
import {
  listBiPropertyLocation,
  selectProperties,
  updatePropertyStatus,
} from "@/api/conf/BiPropertyLocation";
// import {
//   listUsersByUser,
//   listUsersNotInUser,
//   distUser,
//   removeDistUser
// } from "@/api/user";
export default {
  props: {
    tableName: String,
    default: "",
  },
  data() {
    return {
      // 穿梭框数据，这里注意，里面的属性名要和element里面的一样 不能自定义
      data: [
        { key: 3, label: "你好", pinyin: "lalla" },
        { key: 4, label: "很nice", pinyin: "aaa" },
      ], //存放所有的数据，除了value的都是左侧的
      value: [3], //存放右侧菜单数据，里面的数值和data中的key值一致
    };
  },
  created() {
    this.getselectProperties();
  },
  methods: {
    // 穿梭框更改事件
    handleChange(value, direction, keyArr) {
      console.log(JSON.stringify(keyArr));
      let Data = keyArr.map(
        (item) => this.data.filter((i) => i?.key == item)[0]
      );

      let propertyArr = Data.map((item) => item.pinyin);
      console.log(JSON.stringify(propertyArr));

      //value为左/右的所有数值，direction为方向left or right，keyArr为选中的key
      switch (direction) {
        //右到左 显示
        case "left":
          // 调用后端api绑定接口
          let obj = {
            tableName: this.tableName,
            status: "1",
            propertyArr: propertyArr.join(),
          };
          this.handleupdatePropertyStatus(obj);
          break;
        //从左到右 隐藏
        case "right":
          // 调用后端api解绑接口
          let query = {
            tableName: this.tableName,
            status: "0",
            propertyArr: propertyArr.join(),
          };
          this.handleupdatePropertyStatus(query);
          break;
      }
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    handleupdatePropertyStatus(obj) {
      this.openLoading();
      updatePropertyStatus(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.closeLoading();
        }
      });
    },
    getselectProperties() {
      listBiPropertyLocation({
        tableName: this.tableName,
        pageNum: 1,
        pageSize: 100,
      }).then((response) => {
        this.data = [];
        this.value = [];
        response.rows.forEach((item) => {
          this.data.push({
            label: item.fieldComment,
            key: item.id,
            pinyin: item.fieldName,
          });
          if (item.status == "0") {
            this.value.push(item.id);
          }
        });
      });
    },
  },
};
</script>
